<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>个人信息</span>
    </div>
    <div class="avatar-view">
      <el-avatar
        :size="80"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>
    </div>
    <div class="item">
      <span class="left">用户ID</span>
      <span class="right">{{ user.userId }}</span>
    </div>
    <div class="item">
      <span class="left">用户名</span>
      <span class="right">{{ user.userName }}</span>
    </div>
    <div class="item">
      <span class="left">真实姓名</span>
      <span class="right">{{ user.realName }}</span>
    </div>
    <div class="item">
      <span class="left">性别</span>
      <span class="right">{{ user.userSex }}</span>
    </div>
    <div class="item">
      <span class="left">所属地域</span>
      <span class="right">{{ user.areaName }}</span>
    </div>
    <div class="item">
      <span class="left">联系电话</span>
      <span class="right">{{ user.userPhone }}</span>
    </div>
    <div class="item">
      <span class="left">邮箱地址</span>
      <span class="right">{{ user.userEmail }}</span>
    </div>
    <div class="item">
      <span class="left">职位</span>
      <span class="right">{{ user.userWork }}</span>
    </div>
    <div class="item">
      <span class="left">个人描述</span>
      <span class="right">{{ user.userDesc }}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          username: 'username'
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  .item {
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    border-bottom: 1px solid #ccc;

    .left {
      font-weight: 700;
    }
  }

  .avatar-view {
    text-align: center;
  }
}
</style>
